<template>
    <div class='GoodsContainer'>
      <div class="headerSection">
        <split-vertical title="商品信息"></split-vertical>
        <v-form :formProps="searchForm" ref="form"
                v-on:handleReset="handleReset"
                v-on:coverFormData="coverFormData">
        </v-form>
      </div>
        <div class="stand">
          <div style="line-height:50px;margin-left:10px;">
            <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
          </div>
          <div style="margin:0 10px;">
            <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
          </div>
        </div>
        <div class="block">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-sizes="[10]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageCount">
            </el-pagination>
        </div>
        <!-- 弹框 -->
        <modifyshop-info v-if='showtip' @closeDialog='closeDialog' :updateShopInfo='updateShopInfo'></modifyshop-info>
        <add v-if="showAdd"  @closeDialog='closeDialog'></add>
    </div>
</template>
<script>
import VTable from "components/common/PageTable/VTable"
import modifyshopInfo from "components/base/commodityInfo/ModifyshopInfo"
import add from "components/base/commodityInfo/add"
import SplitVertical from "components/common/SplitVertical"
import VForm from "components/common/VForm"
import VButton from "components/common/VButton"
export default{
    components: {
      modifyshopInfo,VTable,  VForm, VButton, SplitVertical,add
    },
    data(){
        return{
            showAdd:false,
            searchCondition:{},
            pageCount:0,
            pageIndex:1,
            pageSize:10,
            //控制弹框的显示
            show:false,
            showtip:false,
            brandList: [],
            //修改商品信息
            updateShopInfo:{},
            //V-model
            productName:'',
            productCode:'',
            brandName:'',
            id:'',
            searchForm: {
              col: 3,
              labelWidth: '85px',
              submitBtn: {
                text: '搜索'
              },
            formItemArray: [{
              label: '商品名称',
              prop: 'productName',
              placeholder: "请输入商品名称",
              value: ''
            }, {
              label: '货号',
              prop: 'productCode',
              placeholder: "请输入货号",
              value: ''
            }, {
              label: '品牌',
              placeholder: "请选择",
              prop: 'brandId',
              itemType: 'select',
              options: [],
              value: ''
            }],
          },
          operationBtnArray: [{
            text: '刷新',
            show: true,
            type: 'primary',
            icon:'el-icon-refresh',
            methodName: 'refresh',
          }, {
            icon:'el-icon-plus',
            text: '新增',
            show: true,
            type: 'success',
            methodName: 'add',
          }],
          tableParams:{
              dataArray:[],
              operationColumnWidth:'90',
              showMultiSelection:false,
              columnArray:[
                  {label: '品牌', prop: 'brandName',width:'100',sortable: false},
                  {label: '商品名称', prop: 'productName',  sortable: false},
                  {label: '货号', prop: 'productCode', width:'100',sortable: false},
                  {label: '商品sku名称', prop: 'sku',with:'150',sortable: false},
                  {label: '种类', prop: 'productTypeName',width:'100',  sortable: false},
                  {label: '条形码', prop: 'barCode',width:'100',  sortable: false},
                  {label: '录入人', prop: 'name',width:'100',  sortable: false},
                  {label: '状态', prop: 'state',width:'80', sortable: false}
              ],
              rowHandle:{
                  view:{
                      show:false
                  }
              }
          },


        }
    },
    created(){
        this.init()

    },
    methods: {
        init(){
            this.shopDetail()
            this.selectBrand()
        },
        handleSearchTopBtn(methodName) {
          if (methodName === "refresh") {
            this.refresh();
          } else {
            this.create();
          }
        },
        handleReset(formName) {
          this.$refs.form.resetForm(formName);
        },
        coverFormData(data) {
          this.searchCondition = data;
          this.query()
        },
        handleOperation(rowIndex, row, methodName){
            this.id=row.id
            if(methodName == "update"){
               this.showTip=true
               this.modifyCommodityInfo()
            }else if(methodName == "delete"){
                this.deleteCom()
            }
        },
        //商品信息查询接口
        query( ){
          let param = this.searchCondition;
          if (!param.pageIndex || !param.pageSize) {
            param['pageIndex'] = this.pageIndex;
            param['pageSize'] = this.pageSize;
          }
          let success = data => {
            if (data.code === 'OK') {
              this.pageCount = data.pageCount;
              this.tableParams.dataArray=data.data
            } else {
              this.$message.error(data.msg);
            }
          };
          this.api.productList(param, success);
        },
        //品牌下拉框
        selectBrand(){
            let success=data=>{
                if(data.code=='OK'){
                  this.searchForm.formItemArray.forEach(item => {
                    if (item.prop === 'brandId') {
                      item.options = this.buildExceptKeyAndValue(data.data, "bname", "id", "label", "value");
                    }
                  })
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getBrandDetail({},success)
        },
        //初始化获取商品列表
        shopDetail(){
            let parmas={
                pageIndex:1,
                pageSize:10,
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.tableParams.dataArray= data.data
                    data.data.forEach(element => {
                        if( element.state == "1"){
                            element.state ='正常'
                        }else{
                            element.state ='删除'
                        }
                    });
                    this.pageCount = data.pageCount
                }else{
                    this.$message.error(data.msg)
                }
            }
           this.api.productList(parmas,success)
        },
        //创建新商品弹框
        create(){
            this.showAdd=true

        },
        handleCurrentChange(val) {
          this.searchCondition['pageIndex'] = val;
          this.query()
        },
        //刷新商品列表
        refresh(){
            this.shopDetail()
        },
        //关闭弹窗
        closeDialog(){
            this.showtip=false;
            this.showAdd=false
        },
        //修改商品列表
        modifyCommodityInfo(){
            this.showtip=true;
            let parmas={
                id:this.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.updateShopInfo=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.productGetOne(parmas,success)
        },
        //删除列表记录
        deleteCom(){
            this.$confirm('是否删除该消息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
            }).then(() => {
                //删除商品信息
                let parmas={
                    id:this.id
                }
                let success=data=>{
                    if(data.code=='OK'){
                        this.shopDetail()
                        this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }
                }
                this.api.productDelete(parmas,success)

                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
         }
    },

}
</script>

<style lang="scss" scoped>
  $color :2px solid #e8e8e8;
 .GoodsContainer{
    .headerSection{
      background:#fff;
      height:140px;
      padding: 0 10px;
      border-left: $color;
      border-right: $color;
      border-bottom: $color;
      .el-form-item{
        margin-bottom:12px !important;
      }
    }
    .block{
        padding: 10px 0;
        text-align: right;
    }
 }
</style>
